<template>
	<view class="template-edit tn-safe-area-inset-bottom">
		<view class="tn-safe-area-inset-bottom">
			<view class="tn-margin bg tn-padding" style="border-radius: 10rpx;">
				<textarea :maxlength="configInfo.tiezi_zishu" v-model="content" placeholder="说点什么，万一火了呢，限800字以内"
					placeholder-style="color:#AAAAAA" @input="descInput($event)" show-confirm-bar="true"></textarea>
				<tn-image-upload-drag ref="imageUpload" :isadd="false" :action="action" :width="210" :height="210"
					:formData="formData" :sourceType="sourceType" :fileList="fileList" :disabled="disabled"
					:autoUpload="autoUpload" :maxCount="maxCount" :showUploadList="showUploadList"
					:showProgress="showProgress" :deleteable="deleteable" :customBtn="customBtn" @sort-list="onSortList"
					@on-uploaded="onUploaded" @upjindu="upjindu" />

				<view class="voice tn-flex tn-flex-col-center" @click="bofang" v-if="vocurl">
					<!-- 未播放 -->
					<image src="/static/my/play.png" v-if="!isplay" class="play" mode=""></image>
					<!-- 播放中 -->
					<image src="https://web.lanmei.co/image/pause.png" v-else class="play" mode=""></image>
					<image src="/static/my/playIcon.png" class="playIcon" :class="{'op-animation':isplay}" mode="">
					</image>
					<text class="s">{{vocscend}}s</text>
				</view>

				<!-- <tn-button backgroundColor="#00FFC6" padding="40rpx 0" width="60%" shadow fontBold v-if="vocurl"
					@click="bofang">
					<view class="voice-line-wrap"
						style="--line-height:15px;--line-start-color:royalblue ;--line-end-color:indianred">
						<block v-if="isplay">
							<view class="voice-line one"></view>
							<view class="voice-line two"></view>
							<view class="voice-line three"></view>
							<view class="voice-line four"></view>
							<view class="voice-line five"></view>
							<view class="voice-line six"></view>
							<view class="voice-line seven"></view>
							<view class="voice-line six"></view>
							<view class="voice-line five"></view>
							<view class="voice-line four"></view>
							<view class="voice-line three"></view>
							<view class="voice-line two"></view>
							<view class="voice-line one"></view>
						</block>
						<text class="tn-color-black" style="margin-left: 15px;">{{vocscend}}s</text>
					</view>
					<view style="margin-left: 20px;" @click="quixiaovoc">
						<tn-badge :radius="53" backgroundColor="#c5c5c5" fontColor="#000000" size=50 :absolute="true"
							:translateCenter="false">
							<text>x</text>
						</tn-badge>
					</view>
				</tn-button> -->

				<view class="fufei" v-if="pay_price">付费 <text>{{pay_price}}</text> 海豚币</view>
			</view>

			<view class="tn-flex tn-flex-row-between tn-flex-col-center  tn-margin-left tn-margin-right type-content">
				<view class="tn-flex justify-content-item">
					<view class="option-item" @click="tupiantap">
						<image src="/static/dynamic/1.png" class="img-icon" mode=""></image>
						<view class="tn-text-sm tn-margin-top-sm">图片</view>
					</view>
					<view @click="voctap" class="option-item" v-if="is_add_voc">
						<image src="/static/dynamic/2.png" class="img-icon" mode=""></image>
						<!-- <text class="tn-icon-vip tn-color-red" v-if="configInfo.vocd_is_vip"></text> -->
						<view class=" tn-text-sm tn-margin-top-sm">语音</view>
					</view>
					<view @click="vodiantap" class="option-item" v-if="is_add_vod">
						<image src="/static/dynamic/3.png" class="img-icon" mode=""></image>
						<!-- <text class="tn-icon-vip tn-color-red" v-if="configInfo.vocd_is_vip"></text> -->
						<view class=" tn-text-sm tn-margin-top-sm">视频</view>
					</view>
					<view @click="pay_price_show=true" class="option-item" v-if="configInfo.is_goods_pay">
						<image src="/static/dynamic/4.png" class="img-icon" mode=""></image>
						<!-- <text class="text-white tn-text-sm" v-if="pay_price">{{pay_price}}</text> -->
						<view class=" tn-text-sm tn-margin-top-sm">付费</view>
					</view>

					<view v-if="up.is_add_link" @click="linkshow=true" class="option-item">
						<image src="/static/dynamic/5.png" class="img-icon" mode=""></image>
						<view class=" tn-text-sm tn-margin-top-sm">链接</view>
					</view>

					<view v-if="up.is_add_cloud" @click="cloudshow=true" class="option-item">
						<image src="/static/dynamic/6.png" class="img-icon" mode=""></image>
						<view class=" tn-text-sm tn-margin-top-sm">网盘</view>
					</view>
					<view v-if="up.is_add_pk" @click="pkshow=true;addpk()" class="option-item">
						<image src="/static/dynamic/7.png" class="img-icon" mode=""></image>
						<view class=" tn-text-sm tn-margin-top-sm">投票</view>
					</view>
					<view v-if="up.is_add_hongbao" @click="hongbaoshow=true" class="option-item">
						<image src="/static/dynamic/8.png" class="img-icon" mode=""></image>
						<view class="tn-text-sm tn-margin-top-sm">红包</view>
					</view>
				</view>
			</view>

			<block v-if="vodurl">
				<view class="tn-margin w-title">
					<text class="w-title-left">视频</text>
					<text class="tn-icon-close" @click="vodurl=''"></text>
				</view>
				<view class="tn-margin">
					<video :src="vodurl" style="height: 267rpx;"></video>
				</view>
				<view class="tn-margin fengmian">
					<view class="title">上传视频封面</view>
					<view class="u-icon" @click="uploadImg">
						<image v-if="!vod_img"
							src="https://peiwanblogs.huolieniaowangluo.com/wx-image/wfw/autionIcon.png" mode="">
						</image>
						<image v-else :src="vod_img" mode="">
						</image>
					</view>
				</view>
			</block>
			<block v-if="webshow">
				<view class="tn-margin text-white"
					style="position: relative;border-radius: 10rpx;padding: 10rpx 30rpx 0 30rpx;">
					网页地址（将目标网页直接显示）
				</view>
				<view class="tn-margin tn-bg-gray--light"
					style="position: relative;border-radius: 10rpx;padding: 10rpx 30rpx;">
					<input placeholder="填写网页视频地址或粘贴" v-model="webbody" name="input" placeholder-class="p-class"></input>
					<view style="" @click="webshow=false;webbody=''">
						<tn-badge :radius="53" backgroundColor="#00FFC6" fontColor="#000000" :absolute="true"
							:translateCenter="false">
							<text style="font-size: 18px;">x</text>
						</tn-badge>
					</view>
				</view>
			</block>

			<block v-if="linkshow">
				<view class="tn-margin w-title">
					<text class="w-title-left">超链接（默认浏览器打开超链接）</text>
					<text class="tn-icon-close" @click="linkshow=false;linkbody=''"></text>
				</view>
				<view class="tn-margin tn-bg-gray--light"
					style="position: relative;border-radius: 10rpx;padding: 10rpx 30rpx;">
					<input placeholder="填写超连接地址" v-model="linkbody" name="input" placeholder-class="p-class"></input>

				</view>
			</block>
			<block v-if="cloudshow">
				<!-- <view class="tn-margin text-white"
					style="position: relative;border-radius: 10rpx;padding: 10rpx 30rpx 0 30rpx;">
					网盘（可复制地址和密码）
				</view> -->
				<view class="tn-margin w-title">
					<text class="w-title-left">网盘（可复制地址和密码）</text>
					<text class="tn-icon-close" @click="cloudshow=false;cloudbody='';cloudbodypass=''"></text>
				</view>
				<view class="tn-margin tn-bg-gray--light"
					style="position: relative;border-radius: 10rpx;padding: 10rpx 30rpx;">
					<input placeholder="填写网盘地址" v-model="cloudbody" name="input" placeholder-class="p-class"></input>
					<!-- <view style="" @click="cloudshow=false;cloudbody='';cloudbodypass=''">
						<tn-badge :radius="53" backgroundColor="#00FFC6" fontColor="#000000" :absolute="true"
							:translateCenter="false">
							<text style="font-size: 18px;">x</text>
						</tn-badge>
					</view> -->
				</view>
				<view class="tn-margin tn-bg-gray--light"
					style="width: 50%;position: relative;border-radius: 10rpx;padding: 10rpx 30rpx;">
					<input placeholder="填写网盘密码" v-model="cloudbodypass" name="input"
						placeholder-class="p-class"></input>
				</view>

			</block>



			<block v-if="pkshow">
				<!-- <view class="tn-margin text-white"
					style="position: relative;border-radius: 10rpx;padding: 10rpx 30rpx 0 30rpx;">
					投票PK（单选最多6个选项）
				</view> -->
				<view class="tn-margin w-title">
					<text class="w-title-left">投票PK（单选最多6个选项）</text>
					<text class="tn-icon-close" @click="pkshow=false;pkbody='';pklist=[]"></text>
				</view>
				<view class="tn-margin tn-bg-gray--light"
					style="position: relative;border-radius: 10rpx;padding: 10rpx 30rpx;">
					<input placeholder="填写投票标题" v-model="pkbody" name="input" placeholder-class="p-class"></input>
					<!-- <view style="" @click="pkshow=false;pkbody='';pklist=[]">
						<tn-badge :radius="53" backgroundColor="#00FFC6" fontColor="#000000" :absolute="true"
							:translateCenter="false">
							<text style="font-size: 18px;">x</text>
						</tn-badge>
					</view> -->
				</view>
				<block v-for="(item, pkindex) in pklist" :key="pkindex">
					<view class="tn-margin tn-bg-gray--light"
						style="width: 50%;position: relative;border-radius: 10rpx;padding: 10rpx 30rpx;">
						<input placeholder="填写投票选项" v-model="item.body" name="input"
							placeholder-class="p-class"></input>
						<view style="" @click="closepk(pkindex)">
							<tn-badge :radius="53" backgroundColor="#ef675f" fontColor="#ffffff" :absolute="true"
								:translateCenter="false">
								<text style="font-size: 18px;">-</text>
							</tn-badge>
						</view>
					</view>
				</block>
				<view @click="addpk()" class="tn-margin text-white"
					style="position: relative;border-radius: 10rpx;padding: 10rpx 30rpx;">
					+添加选项
				</view>
			</block>

			<block v-if="hongbaoshow">
				<!-- <view class="tn-margin text-white"
					style="position: relative;border-radius: 10rpx;padding: 10rpx 30rpx 0 30rpx;">
					{{configInfo.site_moneyname}}红包（我的：{{up.money}})评论帖子后随机领取
				</view> -->
				<view class="tn-margin w-title">
					<text class="w-title-left">红包（评论帖子后随即领取）我的：{{up.money}}</text>
					<text class="tn-icon-close" @click="hongbaoshow=false;hongbaobody='';hongbaonum=''"></text>
				</view>
				<view class="tn-margin tn-bg-gray--light"
					style="width: 50%;position: relative;border-radius: 10rpx;padding: 10rpx 30rpx;">
					<input :placeholder="hongbaotitle" type="number" v-model="hongbaobody" name="input"
						placeholder-class="p-class"></input>
					<!-- <view style="" @click="hongbaoshow=false;hongbaobody='';hongbaonum=''">
						<tn-badge :radius="53" backgroundColor="#DB89F5" fontColor="#000000" :absolute="true"
							:translateCenter="false">
							<text style="font-size: 18px;">x</text>
						</tn-badge>
					</view> -->
				</view>
				<view class="tn-margin tn-bg-gray--light"
					style="width: 50%;position: relative;border-radius: 10rpx;padding: 10rpx 30rpx;">
					<input placeholder="红包个数" type="number" v-model="hongbaonum" name="input"
						placeholder-class="p-class"></input>
				</view>

			</block>


			<view class="about-shadow  tn-margin">
				<!-- <tn-list-cell :unlined="true" :radius="true" :fontSize="30" v-if="cate_id==0&&configInfo.is_quanzi==1"
					@click="navigateToFn({ url: '/homePages/quanclass?type=1', checkLogin: false })">
					<view class="tn-flex tn-flex-row-between tn-text-bold" style="width: 100%;">
						<view class="tn-margin-left-sm">
							{{ quan_title}}
						</view>
						<view class="tn-color-gray tn-icon-right"></view>
					</view>
				</tn-list-cell> -->


				<tn-list-cell :unlined="true" :radius="true" :fontSize="30" @click="xuanzehuati()">
					<view class="tn-flex tn-flex-row-between tn-text-bold" style="width: 100%;">
						<view class="tn-flex tn-flex-col-center">
							<image src="/static/dynamic/9.png" mode="" class="img-icon1"></image>
							{{ tags_title}}
						</view>
						<view class="tn-color-gray tn-icon-right"></view>
					</view>
				</tn-list-cell>
				<view class="tn-tag-content tn-text-justify" v-if="tages_checkedlist.length>0"
					style="margin-left: 20px;">
					<view v-for="(item, indexdsdfsdf) in tagList" :key="indexdsdfsdf"
						class="tn-tag-content__item tn-margin-right tn-round tn-text-sm tn-text-bold tag-bg  tn-color-black"
						@click="shandiao(indexdsdfsdf,item.id)" v-if="item.checked">
						<text class="tn-tag-content__item--prefix">#</text> {{ item.title }}
						<text class="tn-icon-close" style="margin-left: 10px;"></text>
					</view>
				</view>
				<tn-list-cell :unlined="true" :radius="true" :fontSize="30" @click="quanxianxuanze()">
					<view class="tn-flex tn-flex-row-between tn-text-bold" style="width: 100%;">
						<view class=" tn-flex tn-flex-col-center">
							<image src="/static/dynamic/10.png" mode="" class="img-icon2"></image>
							{{ quanxian}}
						</view>
						<view class="tn-color-gray tn-icon-right"></view>
					</view>
				</tn-list-cell>
				<tn-list-cell :unlined="true" :radius="true" :fontSize="30"
					v-if="configInfo.is_fujin && !isAuditVersion" @click="selectAddressFn()">
					<view class="tn-flex tn-flex-row-between tn-text-bold" style="width: 100%;">
						<view class=" tn-flex tn-flex-col-center">
							<image src="/static/dynamic/11.png" mode="" class="img-icon3"></image>
							{{ address}}
						</view>
						<view class="tn-color-gray tn-icon-right"></view>
					</view>
				</tn-list-cell>
			</view>



			<video v-show="video.visible" :src="video.url" id="videoPlayer"
				@fullscreenchange="onVideoFullScreenChange"></video>



			<record-pop ref="recordPop" @endRecord="end"></record-pop>
			<!-- <tn-popup v-model="voc" width="80%" height="40%" mode="bottom" :borderRadius="30" :closeBtn="false"
				:maskCloseable="true" @close="closedPopup_voc">
				<nb-voice-record ref="luyinUpload" :shijian="vocdtime" v-model="voc" @startRecord="start"
					@endRecord="end" @cancelRecord="cancel">
				</nb-voice-record>

			</tn-popup> -->

			<tn-popup v-model="popshow" width="80%" mode="bottom" :borderRadius="30" @close="closedPopup">
				<view class="pop">
					<view class="pop-top">
						<view class="input">
							<image src="/static/index/sou1.png" mode=""></image>
							<input type="text" placeholder="输入关键词搜索" placeholder-class="p-class" @input="inputChange" />
						</view>
						<text class="submit-btn" @click="popshow=false">完成</text>
					</view>
					<scroll-view scroll-y="true" class="scroll-view">
						<block v-for="(item, indexdsdf) in tagList" :key="indexdsdf">
							<view class="list-item" @click="huati(item.id,item.title,indexdsdf)">
								<text class="list-item-left">#{{ item.title }}</text>
								<view class="imgs">
									<image src="/static/index/pitchon1.png" v-if="item.checked" mode=""></image>
									<image src="/static/index/unselected.png" v-else mode=""></image>
								</view>
							</view>
						</block>
					</scroll-view>

				</view>

				<!-- <view class="tn-flex " @click="popshow=false">
					<view class="tn-flex-1 justify-content-item tn-margin-sm tn-text-center">
						<tn-button shape="round" backgroundColor="#FFF00D" fontColor="#080808">
							<text class="tn-text-bold">确定</text>
						</tn-button>
					</view>
				</view> -->

				<!-- <scroll-view class="tn-classify__left-box tn-flex-basic-sm" scroll-top="300" scroll-y
					scroll-with-animation style="height:100%;">

					<view class="about-shadow  tn-margin">
						<tn-list-cell :unlined="true" :radius="true" :fontSize="30" v-for="(item, indexdsdf) in tagList"
							:key="indexdsdf" @click="huati(item.id,item.title,indexdsdf)">
							<view class="tn-flex tn-flex-row-between" style="width: 100%;">
								<view class="tn-margin-left-sm">
									<text class="tn-tag-content__item--prefix">#</text>
									{{ item.title }}
								</view>
								<view style="font-size: 20px;" class=" "
									:class="item.checked ?  'tn-icon-success-square tn-color-blue' : 'tn-icon-square'">
								</view>
							</view>
						</tn-list-cell>
					</view>
				</scroll-view> -->
			</tn-popup>


			<tn-popup v-model="quanxianshow" width="80%" height="40%" mode="bottom" :borderRadius="30" :closeBtn="false"
				:maskCloseable="true" @close="closedPopup">



				<view class=" tn-flex tn-flex-row-between tn-flex-col-center tn-padding  dd-glass"
					@click="xuanzequqanxian(0,'公开可见')">
					<view class="justify-content-item tn-padding-bottom">
						<view class="tn-flex tn-flex-col-center tn-flex-row-left">
							<view class="tn-padding-right ">
								<view class="tn-padding-right tn-padding-left-sm">
									<text class=" tn-text-bold tn-icon-open">公开可见</text>
								</view>
								<view class="tn-padding-right tn-padding-top-xs tn-padding-left-sm tn-text-ellipsis">
									<text class="tn-color-gray tn-text-bold">帖子动态将在广场展示</text>
								</view>
							</view>
						</view>
					</view>
					<view
						class="justify-content-item tn-flex-col-center tn-flex-row-center tn-text-center tn-padding-bottom">
						<view class="">
							<text class="tn-icon-success" style="font-size: 20px;" v-if="quanxian_id==0"></text>
						</view>
					</view>


				</view>


				<view class=" tn-flex tn-flex-row-between tn-flex-col-center tn-padding  dd-glass"
					@click="xuanzequqanxian(1,'仅主页可见')">
					<view class="justify-content-item tn-padding-bottom">
						<view class="tn-flex tn-flex-col-center tn-flex-row-left">
							<view class="tn-padding-right tn-color-black">
								<view class="tn-padding-right tn-padding-left-sm">
									<text class=" tn-text-bold tn-icon-lock">主页可见</text>
								</view>
								<view class="tn-padding-right tn-padding-top-xs tn-padding-left-sm tn-text-ellipsis">
									<text class="tn-color-gray tn-text-bold">他人只能在你的主页看见</text>
								</view>
							</view>
						</view>
					</view>
					<view
						class="justify-content-item tn-flex-col-center tn-flex-row-center tn-text-center tn-padding-bottom">
						<view class="">
							<text class="tn-icon-success" style="font-size: 20px;" v-if="quanxian_id==1"></text>
						</view>
					</view>
				</view>
				<view class=" tn-flex tn-flex-row-between tn-flex-col-center tn-padding  dd-glass"
					@click="xuanzequqanxian(2,'仅自己可见')">
					<view class="justify-content-item tn-padding-bottom">
						<view class="tn-flex tn-flex-col-center tn-flex-row-left">
							<view class="tn-padding-right tn-color-black">
								<view class="tn-padding-right tn-padding-left-sm">
									<text class=" tn-text-bold tn-icon-lock">自己可见</text>
								</view>
								<view class="tn-padding-right tn-padding-top-xs tn-padding-left-sm tn-text-ellipsis">
									<text class="tn-color-gray tn-text-bold">他人无法查看帖子</text>
								</view>
							</view>
						</view>
					</view>
					<view
						class="justify-content-item tn-flex-col-center tn-flex-row-center tn-text-center tn-padding-bottom">
						<view class="">
							<text class="tn-icon-success" style="font-size: 20px;" v-if="quanxian_id==2"></text>
						</view>
					</view>
				</view>

			</tn-popup>









		</view>
		<view class="" style="height: 200rpx;"></view>
		<view class="tn-flex tn-footerfixed">
			<view class="tn-flex-1 justify-content-item tn-margin-sm tn-text-center" @click="fabuba()">
				<view class="fabu-btn">确定发布</view>
			</view>
		</view>
		<!-- <view class='tn-tabbar-height'></view> -->

		<tn-modal width="50%" v-model="wancheng" backgroundColor="#E4E9EC" padding="30rpx 80rpx" :radius="25"
			:content="wanchengtitle" :showCloseBtn="false" :maskCloseable="false" :zoom="true" :custom="false">

		</tn-modal>


		<tn-modal width="80%" v-model="is_fatie" backgroundColor="#E4E9EC" padding="30rpx 80rpx" :radius="25" title="提醒"
			content='发帖需要实名认证' :button="button" :showCloseBtn="false" :maskCloseable="false" :zoom="true"
			:custom="false" @click="clickBtn_shenqing">

		</tn-modal>

		<dk-shezhi v-model="tijiaoisshow" width="80%" height="40%" mode="center" :borderRadius="30" giftitle="提交帖子"
			:closeBtn="false" :maskCloseable="false">
			<slot>
				<view v-if="vodurl||vocurl">
					<view class="custom-modal-content tn-padding">
						<tn-circle-progress :percent="progress" :showPercent="true"></tn-circle-progress>
					</view>
					<view class="custom-modal-content tn-padding">
						{{wanchengtitle}}
					</view>
				</view>
				<view v-else>
					<view class="custom-modal-content tn-padding">
						<tn-circle-progress :percent="progress" :showPercent="true"></tn-circle-progress>
					</view>
					<view class="custom-modal-content tn-padding">
						{{wanchengtitle}}
					</view>
				</view>

			</slot>
		</dk-shezhi>

		<!-- 付费帖子 -->
		<tn-popup v-model="pay_price_show" mode="center">
			<view class="fufei-pop">
				<view class="pop-top">
					<view class="pop-nav">
						<text class="nav-left">售卖金额</text>
						<text class="tn-icon-close" @click="pay_price_show = false"></text>
					</view>
					<input type="text" placeholder="请输入金额" placeholder-class="p-class" v-model="pay_price" />
				</view>
				<view class="pop-bottom" @click="pay_price_show=false">确定</view>
			</view>
		</tn-popup>
		<!-- 登录框组件 -->
		<login-fn :is-show-login="loginBoxFlag" @loginSuccessCallback="refreshFn" @close="closeGlobalLoginFn">
		</login-fn>

		<permissionGuide ref="refPermissionGuide" />

	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex'

	import {
		host
	} from '@/siteinfo.js'
	const audioContext = uni.createInnerAudioContext()
	import template_page_mixin from '@/libs/mixin/template_page_mixin.js'
	import permissionGuide from "@/components/permissionGuide/index.vue"
	import COS from '@/common/COS.js'
	import {
		Crypto,
		Base64
	} from '@/common/bundle.js'; //引入上面的代码
	import {
		imgUploading
	} from "@/common/common.js"
	import {
		requestPermission
	} from "@/tools/permision.js"
	export default {
		name: 'TemplateEdit',
		components: {
			permissionGuide
		},
		mixins: [template_page_mixin],
		data() {
			return {
				tab: 0,
				loginBoxFlag: false,
				//、、、、、
				webshow: false,
				webbody: '',
				linkshow: false,
				linkbody: '',
				cloudshow: false,
				cloudbody: '',
				cloudbodypass: '',
				pkshow: false,
				pkbody: '',
				pklist: [],
				hongbaotitle: '',
				hongbaoshow: false,
				hongbaobody: '',
				hongbaonum: '',
				//、、、、、、、
				pay_price_show: false,
				pay_price: '',
				tages_checkedlist: [],
				upimgw: 0,
				tijiaoisshow: false,
				vocdtime: 60,
				is_add_voc: 0,
				is_add_vod: 0,
				is_fatie: false,
				button: [{
						text: '取消',
						backgroundColor: '#c1c1c1',
						fontColor: '#000000'
					},
					{
						text: '去认证',
						backgroundColor: '#ffff00',
						fontColor: '#000000'
					}
				],
				wanchengtitle: '正在提交，请稍等',
				wancheng: false,
				zishu: 0,
				tupian: false,
				voc: false,
				vod: false,
				quanxianshow: false,
				popshow: false,
				cate_id: 0,
				quanxian_id: 0,
				content: '',
				quan_title: '选圈子',
				tags_title: '选话题',
				tags_id: 0,
				quanxian: '公开可见',
				tagList: [],
				yuanTagList: [],
				quan: {
					"id": 0,
					"title": ''
				},
				//图片上传参数
				action: '',
				formData: {
					apiType: 'this,ali',
					token: uni.getStorageSync('token'),
					image: null
				},
				fileList: [],
				sourceType: ['album'],
				okpiclist: '', //上传完毕的图片字符逗号隔开
				showUploadList: true,
				customBtn: false,
				autoUpload: false,
				showProgress: true,
				deleteable: true,
				customStyle: false,
				maxCount: 9,
				disabled: false,
				lng: '',
				lat: '',
				address: '你在哪里',
				//
				//录音
				vocurl: "",
				vocscend: 0,
				vocurlpass: "",
				isplay: false,
				///视频
				vodurl: '',
				vodurlpass: "",
				progress: 0,
				up: [],
				video: {
					sizi: 0,
					name: '',
					visible: false,
					url: '',
					context: null
				},
				vod_img: '',
				isAuditVersion: getApp().globalData.isAuditVersion
			}
		},
		onShow() {
			this.panduan()
		},
		mounted() {
			uni.$on("loginok", async (res) => {
				console.log(res + '登录成功loginok')
				this.loginBoxFlag = false;
				this.panduan()
			})

		},
		onLoad(option) {

			let that = this

			if (option.tab) {
				this.tab = option.tab
			}



			this.video.context = uni.createVideoContext('videoPlayer')
			if (!uni.getStorageSync('token')) {
				that.loginBoxFlag = true
				return false;
			}

			this.hongbaotitle = '填写' + this.configInfo.site_moneyname + '红包总金额'
			uni.$off('setLoginBoxFlag');
			uni.$on('setLoginBoxFlag', loginBoxFlag => {
				console.log(loginBoxFlag)
				that.loginBoxFlag = loginBoxFlag;
			});

			uni.$on('setLoginBoxFlag', loginBoxFlag => {
				console.log(loginBoxFlag)
				that.loginBoxFlag = loginBoxFlag;
			});

			uni.$on('quan', loginBoxFlag => {
				that.quan = loginBoxFlag
				that.quan_title = loginBoxFlag.title
			});
			that.action = host + '/api/user/up_img'
			if (option.id) {
				this.quan.id = option.id
				this.cate_id = option.id
				this.quan_title = option.title
			}

			//	this.panduan()
			this.info()

			uni.getSystemInfo({
				success: function(e) {
					that.upimgw = e.windowWidth / 3
				}
			})
			// 获取音频时长
			audioContext.onCanplay(res => {
				console.log(res)
				// #ifndef MP
				this.vocscend = Math.round(audioContext.duration)
				// #endif

			})


		},
		computed: {
			...mapState({
				isVip: store => store.userInfo.isVip,
			})
		},
		methods: {
			// 选择话题弹窗输入框搜索
			inputChange(e) {
				let key = e.detail.value
				let list = this.yuanTagList.filter(res => {
					return res.jianjie.indexOf(key) != -1
				})
				this.tagList = list
			},
			// 上传视频封面
			uploadImg() {
				uni.showActionSheet({
					itemList: ["相册照片", "拍照"],
					success: (res) => {
						if (res.tapIndex == 0) {
							this.handleChooseImage("album");
						}
						if (res.tapIndex == 1) {
							this.handleChooseImage("camera");
						}
					}
				})
			},

			handleChooseImage(sourceType) {
				this.$uniApiBaseChooseImage({
					count: 1,
					sourceType: [sourceType],
				}).then((res) => {
					uni.showLoading()
					imgUploading(res.tempFilePaths[0]).then(res => {
						console.log(res.data.file)
						this.vod_img = res.data.file
						uni.hideLoading()
					}).catch(() => {
						uni.showModal({
							title: '提示',
							content: '上传失败了，可能图片太大导致，请重试'
						});
					})

				}).catch(error => {
					if (error.errMsg == "show-permision-guide") {
						this.$refs.refPermissionGuide.open({
							perName: sourceType
						})
					}
				})
			},

			refreshFn() {
				console.log('登录返回refreshFn')
				this.loginBoxFlag = false;
				this.panduan()
			},


			closeGlobalLoginFn(e) {

				if (e == undefined) {
					console.log(e, '没有上一页')
					uni.reLaunch({
						url: '/pages/index'
					})
				}
				if (e != false) {
					//this.loginBoxFlag = false;
					//uni.navigateBack()
				}
			},
			closepk(index) {
				this.pklist.splice(index, 1)
			},
			addpk() {
				if (this.pklist.length > 4) {
					this.msg('最多5个')
					return
				}
				let zhi = {
					"body": "",
					"zhi": 0
				}
				this.pklist.push(zhi)
				console.log(this.pklist.length, this.pklist)
			},
			start() {
				console.log('开始录音')
				// 开始录音
			},
			end(event) {
				this.voc = false
				console.log(event)
				this.vocurl = event.tempFilePath
				// #ifdef MP
				this.vocscend = event.duration
				// #endif

				audioContext.src = this.vocurl
				// 结束录音并处理得到的录音文件
				// event中，app端仅有tempFilePath字段，微信小程序还有duration和fileSize两个字段
			},
			cancel() {
				console.log('用户取消录音')
			},


			xuanzehuati() {
				this.popshow = true
			},
			quanxianxuanze() {
				this.quanxianshow = true
			},

			delImage(done) {
				uni.showModal({
					content: '是否删除?',
					success: (res) => {
						if (res.confirm) {
							// 执行 done() 删除
							done()
						}
					}
				})
			},
			quixiaovoc() {
				uni.showModal({
					content: '是否删除?',
					success: (res) => {
						if (res.confirm) {
							this.vocurl = ""
							this.vocscend = 0
						}
					}
				})
			},

			closedPopup_voc() {
				this.voc = false
				// #ifdef APP||MP
				this.$refs.luyinUpload.stopRecord()
				// #endif
			},
			closedPopup() {

				this.popshow = false
				this.quanxianshow = false
			},

			tupiantap() {
				uni.showActionSheet({
					itemList: ["相册照片", "拍照"],
					success: async (res) => {
						if (res.tapIndex == 0) {
							this.sourceType = ['album']

							const _requestPermission = await requestPermission("photoLibrary");
							if (_requestPermission != 1) {
								// 只ios才显示权限引导
								if (this.$isIos) {
									this.$refs.refPermissionGuide.open({
										perName: 'album'
									})
								}
								return
							}
						}
						if (res.tapIndex == 1) {
							this.sourceType = ['camera']

							const _cameraPermission = await requestPermission("camera");
							if (_cameraPermission != 1) {
								// 只ios才显示权限引导
								if (this.$isIos) {
									this.$refs.refPermissionGuide.open({
										perName: 'camera'
									})
								}
								return
							}
						}
						this.$refs.imageUpload.selectFile()
						this.tupian = !this.tupian
						this.vod = false
						this.voc = false
					}
				})

			},
			delvod(done) {
				uni.showModal({
					content: '是否删除?',
					success: (res) => {
						if (res.confirm) {
							// 执行 done() 删除
							this.vod = false
							this.vodurl = ''
						}
					}
				})
			},


			vodiantap() {
				if (this.configInfo.vocd_is_vip && !this.isVip) {
					this.msg('vip专属功能')
					return
				}
				if (this.vocurl) {
					this.msg('请先删除语音哦')
					return
				}
				this.vod = true
				uni.showActionSheet({
					itemList: ["相册视频", "拍摄视频"],
					success: (res) => {
						if (res.tapIndex == 0) {
							this.handleChooseVideo("album");
						}
						if (res.tapIndex == 1) {
							this.handleChooseVideo("camera");
						}
					}
				})
			},

			handleChooseVideo(sourceType) {
				this.$uniApiBaseChooseVideo({
					sourceType: [sourceType],
					maxDuration: this.vocdtime
				}).then(res => {
					this.video.sizi = res.size / 1024 / 1024
					this.video.name = res.name
					this.tupian = false
					this.vodurl = res.tempFilePath;
				}).catch(error => {
					if (error.errMsg == "show-permision-guide") {
						this.$refs.refPermissionGuide.open({
							perName: sourceType
						})
					}
				})
			},
			voctap() {
				if (this.configInfo.vocd_is_vip && !this.isVip) {
					this.msg('vip专属功能')
					return
				}


				if (this.vodurl) {
					this.msg('请先删除视频哦')
					return
				}
				// #ifdef H5
				uni.chooseFile({
					count: 1,
					extension: ['.mp3'],
					success: (res) => {
						console.log(res.tempFilePaths[0])
						this.vocurl = res.tempFilePaths[0]
						audioContext.src = this.vocurl
						// this.vocscend = event.duration
					}
				});
				// #endif
				// #ifndef H5
				this.$refs['recordPop'].open()
				this.voc = true
				this.vod = false
				// #endif

			},

			huatidel() {
				this.tags_title = '请选择下面的话题'
				this.tags_id = 0
			},
			huati(id, title, index) {
				let yixuan = []
				if (this.tagList[index].checked == false && this.tages_checkedlist.length >= this.configInfo.huatishu) {
					this.msg('话题数不能超过' + this.configInfo.huatishu + '个')
					return
				}

				this.tagList[index].checked = !this.tagList[index].checked
				for (let i in this.tagList) {
					if (this.tagList[i].checked) {
						yixuan.push(this.tagList[i])
					}
				}
				this.tages_checkedlist = yixuan
				this.tags_id = id
			},

			shandiao(index, id) {
				for (let i in this.tages_checkedlist) {
					if (this.tages_checkedlist[i].id == id) {
						this.tages_checkedlist.splice(i, 1)
					}
				}

				this.tagList[index].checked = false
			},
			xuanzequqanxian(id, title) {
				this.quanxianshow = false
				this.quanxian_id = id
				this.quanxian = title
			},
			clickBtn_shenqing(res) {
				if (res == 1) {
					this.navigateToFn({
						url: '/minePages/set',
						checkLogin: true
					})
				}
				if (res == 0) {
					uni.navigateBack({})
				}
			},

			async panduan() {
				let that = this;
				let result = await that.$request({
					loading: 0,
					method: 'post',
					url: '/api/user/addAuth',
					data: {

					}
				});
				if (result.data.code == 200) {
					this.up = result.data.data
					if (result.data.data.is_add == 0) {
						this.is_fatie = true
					}
					this.is_add_voc = result.data.data.is_add_voc
					this.is_add_vod = result.data.data.is_add_vod
					if (!this.isVip) {
						this.vocdtime = Number(this.configInfo.vocd_add_time)
					}

				}

			},


			async info() {
				let that = this;
				let result = await that.$request({
					loading: 0,
					method: 'post',
					url: '/api/index/guangChang',
					data: {

					}
				});

				if (result.statusCode == 200) {
					if (result.data.code == 200) {


						that.tagList = result.data.data.tags;
						that.yuanTagList = JSON.parse(JSON.stringify(result.data.data.tags))
					} else {
						uni.showToast({
							icon: 'none',
							title: result.data.msg
						});
					}
				} else {
					uni.showToast({
						icon: 'none',
						title: that.$errorMsg
					});
				}


			},
			// 跳转
			tn(e) {
				uni.navigateTo({
					url: e,
				});
			},


			// 手动清空列表
			clear() {
				this.$refs.imageUpload.clear()
			},
			// 图片拖拽重新排序
			onSortList(list) {},
			// 图片
			upjindu(index) {
				let removeDecimal = Math.trunc(index);
				this.progress = removeDecimal
			},
			onUploaded(list, index) {
				console.log(list)
				if (list.length > 0) {
					let imageList = list.map(i => i.response.data.file).join(',');
					this.okpiclist = imageList
					this.send()
				} else {
					this.send()
				}
			},



			fabuba() {
				this.$common.noMultipleClicks(this.fabu(), 1000);
			},
			descInput: function(e) {
				this.zishu = e.detail.cursor
			},
			async fabu() {
				let that = this
				console.log(this.pklist)
				if (this.vocurl == "" && this.vodurl == "" && this.tupian == "") {
					if (this.content == '') {
						this.msg('说点啥呀')
						return
					}
				}
				if (this.webshow && this.webbody == '') {
					this.msg('请填写网页地址或删除')
					return
				}

				if (this.webshow && this.webbody) {
					let newStr = this.webbody.indexOf("http");
					if (newStr == -1) {
						this.webbody = "http://" + this.webbody
					}
				}

				if (this.linkshow && this.linkbody == '') {
					this.msg('请填写超连接地址或删除')
					return
				}

				if (this.linkshow && this.linkbody) {
					let newStr = this.linkbody.indexOf("http");
					if (newStr == -1) {
						this.linkbody = "http://" + this.linkbody
					}
				}





				if (this.cloudshow && this.cloudbody == '') {
					this.msg('请填写网盘地址或删除')
					return
				}

				if (this.pkshow && this.pkbody == '') {
					this.msg('请填写投票标题')
					return
				}
				if (this.pkshow && this.pkbody) {
					for (let i in this.pklist) {
						if (this.pklist[i].body == '') {
							this.msg('第' + i + 1 + '个投票选项为空')
							return
						}
					}
				}
				if (this.hongbaoshow && !this.hongbaobody && !this.hongbaonum) {
					this.msg('请填写红包金额和数量')
					return
					if (this.hongbaobody < this.up.money) {
						this.msg('你的余额不足发放红包')
						return
					}



				}

				const _checkRealnameVerify = await getApp().checkRealnameVerify()
				if (!_checkRealnameVerify) return
				// if (this.configInfo.is_quanzi == 1 && this.configInfo.is_quanzi_fa == 1 && !this.quan.id) {
				// 	this.msg('请选择圈子')
				// 	return
				// }


				// this.tijiaoisshow = true
				if (this.vocurl) {

					const uploadTask = uni.uploadFile({
						url: this.action, //仅为示例，非真实的接口地址
						filePath: this.vocurl,
						name: 'file',
						formData: {
							'token': uni.getStorageSync('token'),
							'user': 'test'
						},
						success: (uploadFileRes) => {
							let data = JSON.parse(uploadFileRes.data)
							this.vocurlpass = data.data.file
							if (this.tupian) {
								this.wanchengtitle = "音频上传成功"
								this.$refs.imageUpload.upload()
							} else {
								this.send()
							}
						}

					});


					uploadTask.onProgressUpdate((res) => {
						this.progress = res.progress

						console.log('上传进度' + res.progress);

					});


				} else if (this.vodurl) {
					if (this.vod_img == '') {
						this.msg('请选择视频封面')
						return
					}



					if (this.up.up_storage == 1) { //阿里
						let date = new Date(new Date().getTime() + 1000 * 3600);
						let expiration = date.toISOString();
						let policyText = {
							expiration, //设置该Policy的失效时间，超过这个失效时间之后，就没有办法通过这个policy上传文件了
							"conditions": [
								["content-length-range", 0, 1048576000] // 设置上传文件的大小限制
							]
						};

						let bucketName = this.up.up_bucket;
						let policyBase64 = Base64.encode(JSON.stringify(policyText))
						let accessid = this.up.up_ak;
						let accesskey = this.up.up_sk;
						let host = 'https://' + bucketName + '.' + this.up.domain;
						let bytes = Crypto.HMAC(Crypto.SHA1, policyBase64, accesskey, {
							asBytes: true
						});
						let signature = Crypto.util.bytesToBase64(bytes); //签名
						let fileName = this.up.date + '/' + new Date().getTime() + '.mp4'; //文件名 注意：相同文件名会覆盖之前的文件

						const uploadTask = uni.uploadFile({
							url: host,
							filePath: this.vodurl,
							fileType: '',
							name: 'file',
							formData: {
								name: fileName,
								key: fileName, //文件名
								policy: policyBase64, // 输入你获取的的policy
								OSSAccessKeyId: accessid, // 输入你的AccessKeyId
								success_action_status: '200', // 让服务端返回200,不然，默认会返回204
								signature, // 输入你获取的的signature
							},
							success: (res) => {
								this.vodurlpass = host + '/' + fileName
								if (this.tupian) {
									this.wanchengtitle = "视频上传成功"
									this.$refs.imageUpload.upload()
								} else {
									this.send()
								}

							},
							fail: (res) => {
								console.log(res);
							}
						})

						uploadTask.onProgressUpdate((res) => {
							this.progress = res.progress
							console.log('上传进度' + res.progress);
						});


					}






					if (this.up.up_storage == 3) { //腾讯
						let config = {
							"SecretId": this.up.up_ak,
							"SecretKey": this.up.up_sk,
							"Bucket": this.up.up_bucket,
							"Region": this.up.region
						}
						let filename = this.up.date + '/' + new Date().getTime() + '.mp4'
						COS.uploadFileToTencentClound(filename, this.vodurl, config).then((res) => {
							this.vodurlpass = "https://" + res
							if (this.tupian) {
								this.wanchengtitle = "视频上传成功"
								this.$refs.imageUpload.upload()
							} else {
								this.send()
							}
						})

					}

					if (this.up.up_storage == 2) { //七牛
						let formData = {
							'bucket': this.up.up_bucket,
							'key': this.up.date + '/' + new Date().getTime() + '.mp4',
							'token': this.up.upload_token,
							'user': 'test'
						}
						const uploadTask = uni.uploadFile({
							url: this.up.up_url, //仅为示例，非真实的接口地址
							filePath: this.vodurl,
							name: 'file',
							formData: formData,
							success: (uploadFileRes) => {

								if (this.up.up_storage == 2) {
									let data = JSON.parse(uploadFileRes.data)
									this.vodurlpass = this.up.domain.slice(0, this.up.domain.length - 1) +
										'/' + data.key

								}

								if (this.tupian) {
									this.wanchengtitle = "视频上传成功"
									this.$refs.imageUpload.upload()
								} else {
									this.send()
								}
							},
							fail: (dd) => {
								console.log(dd)
							}
						});
						uploadTask.onProgressUpdate((res) => {
							this.progress = res.progress
							console.log('上传进度' + res.progress);
						});
					}


					if (this.up.up_storage == 0) {
						const uploadTask = uni.uploadFile({
							url: this.action, //仅为示例，非真实的接口地址
							filePath: this.vodurl,
							name: 'file',
							formData: {
								'token': uni.getStorageSync('token'),
								'user': 'test'
							},
							success: (uploadFileRes) => {
								let data = JSON.parse(uploadFileRes.data)
								this.vodurlpass = data.data.file
								console.log('视频上传成功')
								if (this.tupian) {
									this.wanchengtitle = "视频上传成功"
									this.$refs.imageUpload.upload()
								} else {
									this.send()
								}
							}
						});
						uploadTask.onProgressUpdate((res) => {
							this.progress = res.progress
							console.log('上传进度' + res.progress);
						});

					}












				} else {
					if (that.tupian) {
						this.$refs.imageUpload.upload()
					} else {
						that.send()
					}
				}








			},

			async send() {
				let ss = ''
				for (let i in this.tagList) {
					if (this.tagList[i].checked) {
						ss += this.tagList[i].id + ','
					}

				}
				ss = ss.slice(0, ss.length - 1);

				let that = this;
				let data = {
					content: that.content,
					tags_ids: ss,
					cate_id: that.quan.id,
					address: that.address,
					lat: that.lat,
					lng: that.lng,
					type: that.quanxian_id,
					images: that.okpiclist,
					voc: that.vocurlpass,
					vocscend: that.vocscend,
					vod: that.vodurlpass,
					price: that.pay_price,
					vod_img: that.vod_img
				}

				if (this.webshow && this.webbody) {
					data.webbody = this.webbody
				}
				if (this.linkshow && this.linkbody) {
					data.linkbody = this.linkbody
				}
				if (this.cloudshow && this.cloudbody) {
					data.cloudbody = this.cloudbody
					data.cloudbodypass = this.cloudbodypass
				}
				if (this.pkshow && this.pkbody) {
					data.pkbody = this.pkbody
					data.pklist = this.pklist
				}
				if (this.hongbaoshow && this.hongbaobody) {
					data.hongbaobody = this.hongbaobody
					data.hongbaonum = this.hongbaonum
				}

				try {
					let result = await that.$request({
						loading: 0,
						method: 'post',
						url: '/api/user/addNewGoods',
						data
					});
					this.tijiaoisshow = true
					console.log(result)
					uni.hideLoading()
					this.progress = 100
					//this.wancheng = true
					this.wanchengtitle = result.data.msg
					uni.$emit('fabu_ok', result.data.code)
					uni.$emit('home_up', result.data.code)
					uni.$emit('circle_up', result.data.code)
					setTimeout(() => {
						this.tijiaoisshow = false

						if (this.tab == 1) {
							this.fanhui()
						} else {
							uni.navigateBack()
						}
					}, 1000);
				} catch (e) {
					uni.showToast({
						icon: 'none',
						title: e.data.msg
					});
				}




				// if (result.statusCode == 200) {
				// 	if (result.data.code == 200) {


				// 	} else {
				// 		console.log(result)
				// 		this.tijiaoisshow = false
				// 		uni.showToast({
				// 			icon: 'none',
				// 			title: result.data.msg
				// 		});
				// 	}
				// } else {
				// 	uni.showToast({
				// 		icon: 'none',
				// 		title: that.$errorMsg
				// 	});
				// }


			},



			selectAddressFn() {
				getApp().handleSysGetLocation().then(res=>{
					this.address = res.address.city;
					this.lng = res.longitude;
					this.lat = res.latitude;
				})
			},

			bofang() {

				if (this.isplay) {
					audioContext.stop()
					this.isplay = false
					return
				}


				this.isplay = !this.isplay;
				let that = this
				// audioContext.src = this.vocurl
				audioContext.play()
				audioContext.onPlay(() => {})
				audioContext.onEnded(() => {
					this.isplay = false
				})
				audioContext.onError(() => {
					this.isplay = false
					that.msg('不支持播放该音频格式')
				})
			},

			playVideo(url) {
				this.video.visible = true;
				this.video.url = url;
				this.$nextTick(() => {
					this.video.context.requestFullScreen({
						direction: 0
					});
					this.video.context.play();
				});
			},
			onVideoFullScreenChange(e) {
				//当退出全屏播放时，隐藏播放器
				if (this.video.visible && !e.detail.fullScreen) {
					this.video.visible = false;
					this.video.context.stop();
				}
			},
			fanhui() {
				console.log(this.tab)
				if (this.tab == 1) {
					uni.switchTab({
						url: '/pages/index'
					});
				} else {
					uni.navigateBack()
				}

			}

		}
	}
</script>

<style lang="scss" scoped>
	/deep/uni-textarea {
		color: #080808 !important;
	}

	.type-content {
		justify-content: center;
		padding: 24px 0px;
		background: url(/static/index/indexBg.png) no-repeat;
		background-size: 100% 100%;
		border-radius: 10px;
	}

	.template-edit {
		background: #efefef;
		height: calc(100vh - 44px);
		padding: 15px 0;
	}

	/deep/.tn-image-upload__item-preview {
		border: none;

	}

	/deep/.tn-image-upload__item-preview__delete {
		border-top-color: rgba(0, 0, 0, 0.2) !important;
	}

	/deep/.tn-popup__content__center_box {
		background-color: transparent;
	}

	.tn-bg-gray--light {
		background-color: #ffffff !important;
	}

	.tag-bg {
		background-color: #F8F7F8 !important;
	}

	.fufei {
		font-size: 28rpx;
		font-weight: 400;
		color: #333333;

		text {
			color: #F02320;
		}
	}

	input {
		color: #333333;
	}

	.voice {
		width: fit-content;
		height: 72rpx;
		background: linear-gradient(180deg, #DB89F5 0%, #834BF4 100%);
		border-radius: 45rpx;
		padding: 0 16rpx;


		.play {
			width: 48rpx;
			height: 48rpx;
		}

		.playIcon {
			width: 133rpx;
			height: 44rpx;
			margin: 0 16rpx;
		}

		.op-animation {
			animation: identifier 0.5s infinite;
		}

		.s {
			font-size: 28rpx;
			font-weight: 400;
			color: #FFFFFF;
		}

		@keyframes identifier {
			0% {
				opacity: 0.8;
			}

			50% {
				opacity: 0.5;
			}

			100% {
				opacity: 0.3;
			}
		}
	}

	.bg {
		background-color: #fff;
	}

	.p-class {
		font-size: 26rpx;
		font-weight: 400;
		color: #CCCCCC;
	}

	.fengmian {
		.title {
			font-size: 30rpx;
			font-weight: bold;
			color: #FFFFFF;
		}

		.u-icon {
			image {
				width: 200rpx;
				height: 200rpx;
			}

			margin-top: 24rpx;
		}
	}

	.w-title {
		color: #333333;
		display: flex;
		align-items: center;
		justify-content: space-between;

		.w-title-left {
			font-size: 28rpx;
			font-weight: 400;

		}

		.tn-icon-close {}
	}

	.fufei-pop {
		width: 630rpx;
		background: #ffffff;
		border-radius: 20rpx;

		.pop-top {
			padding: 24rpx 24rpx 32rpx 24rpx;

			.pop-nav {
				font-size: 32rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;

				.nav-left {
					font-weight: 400;
					color: #333333;
				}

				.tn-icon-close {
					color: #CCCCCC;
					font-weight: bold;
				}
			}

			input {
				height: 68rpx;
				background: #efefef;
				border-radius: 12rpx;
				padding-left: 24rpx;
				margin-top: 16rpx;
				color: #333333;
			}

			.p-class {
				font-size: 28rpx;
				font-weight: 400;
				color: #333333;
			}
		}

		.pop-bottom {
			height: 93rpx;
			font-size: 32rpx;
			font-weight: 400;
			color: #9D5EF4;
			text-align: center;
			line-height: 93rpx;
			border-top: 1px solid #efefef;
		}
	}

	.fabu-btn {
		height: 98rpx;
		background: linear-gradient(180deg, #DB89F5 0%, #834BF4 100%);
		border-radius: 49rpx;
		font-size: 32rpx;
		font-weight: 400;
		color: #FFFFFF;
		line-height: 98rpx;
	}

	textarea {
		color: #FFFFFF;
	}

	.img-icon {
		width: 34rpx;
		height: 34rpx;
	}

	.img-icon1 {
		width: 34rpx;
		height: 34rpx;
		margin-right: 16rpx;
	}

	.img-icon2 {
		width: 38rpx;
		height: 27rpx;
		margin-right: 16rpx;
	}

	.img-icon3 {
		width: 30rpx;
		height: 35rpx;
		margin-right: 16rpx;
	}

	.option-item {
		text-align: center;
		font-size: 20rpx;
		font-weight: 400;
		color: #fff;
		margin-right: 30rpx;
	}

	/* #ifndef MP */
	/deep/.tn-list-cell {
		background: transparent;
		border-bottom: 1px solid #cd7ff5;

		color: #333333;
		padding: 24rpx 0;
	}

	/* #endif */
	/* #ifdef MP */
	/deep/.tn-list-cell.data-v-5ba5bbbc {
		background: transparent;
		border-bottom: 1px solid #1E1F2E;

		color: #333333;
		padding: 24rpx 0;
	}

	/* #endif */

	/* #ifndef MP */
	/deep/.tn-popup--bottom {
		background-color: #ffffff;
		border-radius: 0 !important;
	}

	/* #endif */
	/* #ifdef MP */
	/deep/.tn-popup--bottom.data-v-01456b9c {
		background-color: #1D1E30;
		border-radius: 0 !important;
	}

	/* #endif */


	.text-white {
		color: #333333 !important;
	}


	/* 底部悬浮按钮 start*/
	.tn-tabbar-height {
		min-height: 100rpx;
		height: calc(120rpx + env(safe-area-inset-bottom) / 2);
	}

	.tn-footerfixed {
		bottom: 0;
		left: 0;
		position: fixed;
		width: 100%;
		bottom: calc(30rpx + env(safe-area-inset-bottom));
		z-index: 10;
		box-shadow: 0 1rpx 6rpx rgba(0, 0, 0, 0);

	}

	.pop {
		padding: 0 30rpx 0 30rpx;
		display: flex;
		flex-direction: column;
		height: 726rpx;

		.pop-top {
			display: flex;
			align-items: center;
			justify-content: space-between;
			height: 152rpx;


			.input {
				width: 606rpx;
				height: 72rpx;
				background: #efefef;
				border-radius: 12rpx;
				display: flex;
				align-items: center;

				image {
					width: 24rpx;
					height: 26rpx;
					margin: 0 16rpx 0 24rpx;
				}

				input {
					color: #333333;
				}

				.p-class {
					font-size: 28rpx;
					font-weight: 400;
					color: #333333ad;
				}
			}

			.submit-btn {
				font-size: 30rpx;
				font-weight: 400;
				color: #333333;
			}
		}

		.scroll-view {
			height: 574rpx;

			.list-item {
				display: flex;
				align-items: center;
				justify-content: space-between;
				height: 100rpx;

				.list-item-left {
					font-size: 30rpx;
					font-weight: 400;
					color: #333333;
				}

				.imgs {
					image {
						width: 40rpx;
						height: 40rpx;
					}
				}
			}
		}

	}

	/* 底部悬浮按钮 end*/

	/* 标签内容 start*/
	.tn-tag-content {
		&__item {
			display: inline-block;
			line-height: 20px;
			padding: 4px 20px;
			margin: 4px;

			&--prefix {
				padding-right: 10rpx;
			}
		}
	}

	/* 标签内容 end*/
</style>